<template>
  <back-header
    :customBack="router.back"
    :title="title"
    :titleSize="16"
    :titleBold="false"
  >
    <template #icon>
      <van-icon name="notes-o" size="24" />
    </template>
  </back-header>
  <div style="height: 56px"></div>
  <div class="video-container">
    <video
      v-if="videoUrl"
      controls
      class="video-player"
      disablePictureInPicture
      @timeupdate="handleTimeUpdate"
      @loadedmetadata="handleVideoLoaded"
      ref="videoRef"
    >
      <source :src="videoUrl" type="video/mp4" />
      您的浏览器不支持视频播放。
    </video>
    <div class="controls-container">
      <van-button 
        class="reset-button" 
        type="primary" 
        size="small" 
        icon="replay"
        @click="handleReset"
      >
        重新播放
      </van-button>
    </div>
  </div>
</template>

<script setup>
// ... existing code ...
import BackHeader from "@/components/common/BackHeader.vue";
import { ref, onMounted, computed } from "vue";
import { useRoute } from "vue-router";
import host from "@/utils/host";
const route = useRoute();
const videoUrl = ref("");
const videoRef = ref(null);
let lastCurrentTime = 0;
const isInitialSeek = ref(true);
import { useRouter } from "vue-router";
const router = useRouter();

// 保存播放进度
const saveVideoProgress = (currentTime) => {
  const fileName = route.query.url;
  if (fileName) {
    const progress = currentTime / videoRef.value.duration;
    localStorage.setItem(
      `video-progress-${fileName}-${route.query.id}`,
      progress
    );
    // 发送自定义事件通知进度更新
    window.dispatchEvent(
      new CustomEvent("video-progress-update", {
        detail: {
          fileName,
          progress,
        },
      })
    );
  }
};

// 获取保存的播放进度
const getVideoProgress = (fileName) =>
  parseFloat(
    localStorage.getItem(`video-progress-${fileName}-${route.query.id}`)
  ) || 0;

const handleTimeUpdate = (event) => {
  const video = event.target;
  if (isInitialSeek.value) {
    lastCurrentTime = video.currentTime;
    isInitialSeek.value = false;
    return;
  }

  if (Math.abs(video.currentTime - lastCurrentTime) > 1) {
    video.currentTime = lastCurrentTime;
  } else {
    lastCurrentTime = video.currentTime;
    saveVideoProgress(video.currentTime);
  }
};

// 视频加载完成后设置上次播放位置
const handleVideoLoaded = () => {
  if (videoRef.value) {
    const fileName = route.query.url;
    const savedTime = getVideoProgress(fileName);
    if (savedTime) {
      console.log("savedTime", savedTime);
      isInitialSeek.value = true;
      videoRef.value.currentTime = savedTime * videoRef.value.duration;
    }
  }
};

const title = computed(() => route.query.name);

onMounted(() => {
  const url = route.query.url;
  const name = route.query.name;
  if (url && name) {
    videoUrl.value = url;
    document.title = name;
  }
});

// 重置视频播放
const handleReset = () => {
  if (videoRef.value) {
    const fileName = route.query.url;
    // 清除本地存储的进度
    localStorage.removeItem(`video-progress-${fileName}-${route.query.id}`);
    // 重置视频到开始位置
    videoRef.value.currentTime = 0;
    // 开始播放
    videoRef.value.play();
    // 重置进度追踪变量
    lastCurrentTime = 0;
    isInitialSeek.value = true;
    // 触发进度更新事件
    window.dispatchEvent(
      new CustomEvent("video-progress-update", {
        detail: {
          fileName,
          progress: 0,
        },
      })
    );
  }
};

// ... existing code ...
</script>

<style scoped>
.video-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  width: 100%;
  position: relative;
  background-color: #000;
}

.video-player {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  margin: 0;
  object-fit: contain;
}

.controls-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
}

.reset-button {
  border-radius: 20px;
  padding: 0 20px;
  height: 36px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

@media (max-width: 768px) {
  .video-container {
    padding: 0;
  }

  .video-player {
    width: 100%;
    height: auto;
  }

  .controls-container {
    padding: 12px;
  }

  .reset-button {
    height: 32px;
    font-size: 13px;
    padding: 0 16px;
  }
}
</style>
